<template>
    <section class="minbox">
        <div class="column">
            <div class="panel bar">
                <h2>柱形图</h2>
                <passenger-volume ref="pv"/>
<!--                <div class="chart"></div>-->
                <!-- 小框框 -->
                <div class="panel-footer"></div>
            </div>
            <div class="panel line">
                <h2>折线图</h2>
                <div class="chart">图标</div>
                <!-- 小框框 -->
                <div class="panel-footer"></div>
            </div>
            <div class="panel">
                <h2>其他图</h2>
                <div class="chart">图标</div>
                <!-- 小框框 -->
                <div class="panel-footer"></div>
            </div>
        </div>
        <div class="column">
            <div class="no">
                <div class="no-hd">
                    <ul>
                        <li>123456</li>
                        <li>123456</li>
                    </ul>
                </div>
                <div class="no-bd">
                    <ul>
                        <li>文字</li>
                        <li>文字</li>
                    </ul>
                </div>
            </div>
            <div class="map">
                <div class="map1"></div>
                <div class="map2"></div>
                <div class="map3"></div>
                <div class="chart">
                </div>
            </div>
        </div>
        <div class="column">
            <div class="panel bar">
                <h2>柱形图</h2>
                <div class="chart">图标</div>
                <!-- 小框框 -->
                <div class="panel-footer"></div>
            </div>
            <div class="panel line">
                <h2>折线图</h2>
                <div class="chart">图标</div>
                <!-- 小框框 -->
                <div class="panel-footer"></div>
            </div>
            <div class="panel">
                <h2>其他图</h2>
                <div class="chart">图标</div>
                <!-- 小框框 -->
                <div class="panel-footer"></div>
            </div>
        </div>
    </section>
</template>

<script>
    import PassengerVolume from "./left/PassengerVolume";
    export default {
        name: "AirBody",
        components:{
            PassengerVolume
        },
        mounted() {
            window.onresize=this.myResize
        },
        methods:{
            myResize(){
                this.$refs.pv.resize()
            }
        }

    }
</script>

<style scoped>
    @import "../assets/fonts/font.css";
    .minbox {
        display: flex;
        min-width: 1024px;
        max-width: 1920px;
        margin: 0 auto;
        padding: 0.125rem 0.125rem 0;
    }
    .minbox .column {
        flex: 3;
    }
    .minbox .column:nth-child(2) {
        flex: 5;
        margin: 0 0.125rem 0.1875rem;
    }
    .minbox .panel {
        position: relative;
        height: 3.875rem;
        padding: 0 0.1875rem 0.5rem;
        margin-bottom: 0.1875rem;
        border: 1px solid rgba(25, 186, 139, 0.17);
        background: url(../assets/images/line.png) rgba(255, 255, 255, 0.03);
    }
    .minbox .panel::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 10px;
        height: 10px;
        border-left: 2px solid #02a6b5;
        border-top: 2px solid #02a6b5;
    }
    .minbox .panel::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-right: 2px solid #02a6b5;
        border-top: 2px solid #02a6b5;
    }
    .minbox .panel .panel-footer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
    }
    .minbox .panel .panel-footer::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 10px;
        height: 10px;
        border-left: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
    }
    .minbox .panel .panel-footer::after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-right: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
    }
    .minbox .panel h2 {
        height: 0.6rem;
        line-height: 0.6rem;
        color: #fff;
        font-size: 0.25rem;
        text-align: center;
        font-weight: 400;
    }
    .minbox .panel .chart {
        height: 3rem;
    }
    .no {
        background: rgba(101, 132, 226, 0.1);
        padding: 0.1875rem;
    }
    .no .no-hd {
        position: relative;
        border: 1px solid rgba(25, 186, 139, 0.1);
    }
    .no .no-hd ul {
        display: flex;
    }
    .no .no-hd li {
        position: relative;
        flex: 1;
        line-height: 1rem;
        font-size: 0.875rem;
        color: #ffeb7b;
        text-align: center;
        font-family: "electronicFont";
    }
    .no .no-hd li:nth-child(1)::after {
        content: '';
        position: absolute;
        top: 25%;
        right: 0;
        height: 50%;
        width: 1px;
        background: rgba(255, 255, 255, 0.2);
    }
    .no .no-hd .no .no-hd::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 30px;
        height: 10px;
        border-top: 2px solid #02a6b5;
        border-left: 2px solid #02a6b5;
    }
    .no .no-hd::after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 30px;
        height: 10px;
        border-bottom: 2px solid #02a6b5;
        border-right: 2px solid #02a6b5;
    }
    .no .no-bd ul {
        display: flex;
    }
    .no .no-bd ul li {
        flex: 1;
        text-align: center;
        font-size: 0.225rem;
        color: rgba(255, 255, 255, 0.7);
        line-height: 0.5rem;
        height: 0.5rem;
        padding-top: 0.125rem;
    }
    .map {
        position: relative;
        height: 10.125rem;
    }
    .map .map3,
    .map .map2,
    .map .map1 {
        width: 6.475rem;
        height: 6.475rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: url(../assets/images/map.png) no-repeat;
        opacity: 0.3;
        background-size: 100% 100%;
    }
    .map .map2 {
        width: 8.0375rem;
        height: 8.0375rem;
        background-image: url(../assets/images/lbx.png);
        opacity: 0.6;
        animation: rotate1 15s linear infinite;
        z-index: 2;
    }
    .map .map3 {
        width: 7.075rem;
        height: 7.075rem;
        background-image: url(../assets/images/jt.png);
        animation: rotate2 10s linear infinite;
        opacity: 0.6;
    }
    .map .chart {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 10.125rem;
    }
    @keyframes rotate1 {
        form {
            transform: translate(-50%, -50%) rotate(0deg);
        }
        to {
            transform: translate(-50%, -50%) rotate(360deg);
        }
    }
    @keyframes rotate2 {
        form {
            transform: translate(-50%, -50%) rotate(0deg);
        }
        to {
            transform: translate(-50%, -50%) rotate(-360deg);
        }
    }
</style>
